<template>
  <el-card class="box-card">
    <!--头部区域 start-->
    <template #header>
      <div class="card-header">
        <h3>
          <el-icon style="margin-right: 10px;"><Box/></el-icon>
          轮播图管理
        </h3>
  
        <!--搜索区域 start-->
        <div class="card-search">
          <el-row :gutter="10">

            <el-col :span="11">
              <div class="my-button">
                <el-button plain style="width: 100%;" color="#2fa7b9" @click="addBanner">添加轮播图</el-button>

              </div>
  
            </el-col>
            <el-col :span="3" style="display: inline-flex;justify-content: center;align-items: center;cursor: pointer;">
              <el-icon style="font-size: 20px;color: #b3b6bc;" @click="refresh"><Refresh/></el-icon>
            </el-col>
          </el-row>
        </div>
        <!--搜索区域 end-->
  
      </div>
    </template>
    <!--头部区域 end-->
    <!--表格区域 start-->
    <div class="table-box">
      <el-table element-loading-text="数据加载中..." v-loading="loading" :data="tableData"
      style="width: 100%;text-align: center;" :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ fontSize: '15px',background: '#083a6d',color: 'white',textAlign: 'center' }">
  
        <el-table-column label="序号" width="80" type="index" :index="Nindex"/>
  
        <el-table-column label="轮播图" width="80">
          <template #default="scope">
            <img :src="url+'uploadFile/'+scope.row.bannerImg" style="width: 64px;height: 40px;">
          </template>
        </el-table-column>
        <el-table-column label="轮播图">
        <template #default="scope">
          <span>{{scope.row.bannerName}}</span>
        </template>
      </el-table-column>
       
        <el-table-column label="创建时间">
          <template #default="scope">
            <span>{{formatTime(scope.row.createTime,'yyyy-MM-dd')}}</span>
          </template>
        </el-table-column>
  
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="editBanner(scope.row.id)">编辑</el-button>
            <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :icon="Delete"
            icon-color="#626AEF" :title="'确定删除名为“'+scope.row.bannerName+'”的轮播图吗？'"
            @confirm="delBanner(scope.row.id)">
              <template #reference>
                <el-button size="small" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
  
      </el-table>
    </div>
    <!--表格区域 end-->
    <!--分页插件 start-->
    <el-pagination background layout="total,sizes,prev,pager,next,jumper" :total="total"
    v-model:page-size="pageSize" :page-sizes="[10,20,30,40]" @current-change="changePage"/>
    <!--分页插件 end-->
  </el-card>
    <!--新增轮播图弹出框 start-->
    <el-dialog align-center v-model="addBannerDialogFormVisible" width="50%" destroy-on-close>
  
      <template #header="{close,titleId,titleClass}">
        <div class="my-header">
          <el-icon size="40px"><EditPen/></el-icon>
          <h1>添加轮播图</h1>
        </div>
      </template>
   <!--添加轮播图组件 start-->
      <AddBanner @closeAddBannerForm="closeAddBannerForm" @success="success"/>
      <!--添加轮播图组件 end-->
    </el-dialog>
    <!--新增轮播图弹出框 end-->
  
    <!--编辑轮播图弹出框 start-->
    <el-dialog align-center v-model="editBannerDialogFormVisible" width="50%" destroy-on-close>
  
      <template #header="{ close,titleId,titleClass }">
        <div class="my-header">
          <el-icon size="26px"><EditPen /></el-icon>
          <h1>编辑轮播图</h1>
        </div>
      </template>
  
      <!--编辑轮播图组件 start-->
      <EditBanner :bannerInfo="bannerInfo" @closeEditBannerForm="closeEditBannerForm" @success="success"/>
      <!--编辑轮播图组件 end-->
    </el-dialog>
    <!--编辑轮播图弹出框 end-->
  </template>
  
  <script setup lang="ts">
  import {formatTime} from "@/utils/date"
  import {ref,reactive,toRefs,onMounted} from 'vue'
  import {delBannerApi, getBannerApi, getBannerListApi} from "@/api/edu/banner/banner"
  import { ElMessage } from 'element-plus'
  import AddBanner from "@/views/edu/banner/components/AddBanner.vue"
  import EditBanner from "@/views/edu/banner/components/EditBanner.vue"

  // 服务器路径
  const url = import.meta.env.VITE_APP_BASE_API
  const state = reactive({
    // 搜索关键字
    searchValue: '',
    // 表格数据
    tableData:[],
    // 总条数
    total: 0,
    // 每页显示行数
    pageSize: 10,
    // 当前页码
    pageIndex: 1,
    // 数据加载状态
    loading: false
  })
  // 获取轮播图列表数据
  const loadData = async (state:any)=> {
    state.loading = true
    // 先清空表格数据
    state.tableData = []
    const params = {
      'pageIndex': state.pageIndex,
      'pageSize': state.pageSize,
      'searchValue': state.searchValue
    }
    const { data } = await getBannerListApi(params)
    state.tableData = data.content
    state.total = data.totalElements
    state.loading = false
  }
  onMounted(()=> {
    loadData(state)
  })
  
  // 刷新
  const refresh = ()=> {
    // 搜索关键字
    state.searchValue = ''
    // 加载数据
    loadData(state)
  }
  // 搜索
  const search = ()=> {
    if(state.searchValue!=null){
      loadData(state)
      ElMessage({
        type: 'success',
        message: `关键字“${state.searchValue}”搜索内容如下`
      })
    }
  }
  // 切换页码执行事件
  const changePage = (val:number)=> {
    state.pageIndex = val
    loadData(state)
  }
  // 处理列表序号
  const Nindex = (index: number)=> {
    // 当前页码
    const page = state.pageIndex
    // 每页行数
    const pageSize = state.pageSize
    return index+1+(page-1)*pageSize
  }
  
  // 新增轮播图弹出框状态
  const addBannerDialogFormVisible =ref(false)
  // 添加轮播图
  const addBanner = ()=> {
    addBannerDialogFormVisible.value = true
  }
  // 关闭新增轮播图弹出框
  const closeAddBannerForm = ()=> {
    addBannerDialogFormVisible.value = false
  }
  // 提交表单回调函数
  const success = ()=> {
    loadData(state)
    closeAddBannerForm()
    closeEditBannerForm()
  }
  
  // 编辑轮播图弹出框状态
  const editBannerDialogFormVisible = ref(false)
  // 轮播图信息
  const bannerInfo = ref()
  // 编辑轮播图信息
  const editBanner = async (id:number)=> {
    const { data } = await getBannerApi(id)
    bannerInfo.value = data.result
    editBannerDialogFormVisible.value = true
  }
  // 关闭编辑轮播图弹出框
  const closeEditBannerForm = ()=> {
    editBannerDialogFormVisible.value = false
  }
  // 删除轮播图信息
  const delBanner = async (id: number)=> {
    const { data } = await delBannerApi(id)
    if(data.status===200){
      ElMessage.success('删除成功')
      await loadData(state)
    }else {
      ElMessage.error('删除失败')
    }
  }
 
  const {tableData,pageSize,loading,total,searchValue} = toRefs(state)
  </script>
  
  <style scoped>
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .card-header h3 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  
  :deep(.el-card__header){
    border-bottom: 1px solid rgb(238 238 238);
    color: #083a6d;
  }
  
  /*分页样式*/
  .el-pagination {
    justify-content: center;
    margin-top: 20px;
  }
  
  :deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active){
    background-color: #083a6d;
  }
  
  /*自定义弹出框头部样式*/
  .my-header {
    display: flex;
    justify-content: flex-start;
    color: #083a6d;
  }
  .my-button {
    display: flex;
    justify-content: space-between;
  }
  </style>
  